import { watch } from 'vue'
import { useSystemStore } from '@/store/system'

const systemSore = useSystemStore()

export default function useTheme() {
  const html = document.querySelector('html')
  watch(
    () => systemSore.themeClass,
    (newVal) => {
      let currentTheme
      if (newVal === 'light-theme') {
        currentTheme = 'light'
      } else {
        currentTheme = 'dark'
      }

      html.className = currentTheme
    },
    {
      immediate: true
    }
  )
}
